<template>
  <div class="app-container cmdb-home-page">
    <el-card class="card-h-100">
      <div class="search-input-wraper">
        <el-input v-model="s_kw" placeholder="请输入内容" class="search-input" @keyup.enter.native="onGlobalSearch">
          <el-button slot="append" icon="el-icon-search" @click="onGlobalSearch" />
        </el-input>
        <!-- <el-button type="text" icon="el-icon-download" @click="downloadTpl">下载导入模板</el-button> -->
        <el-button type="text" icon="el-icon-download" @click="exportExcel">下载搜索结果</el-button>
      </div>
      <div>
        <el-row :gutter="20">
          <el-col v-for="item in data" :key="item.schemadef._id" :span="6">
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <el-image :src="item.schemadef.iconUrl" fit="contain">
                  <div slot="error" class="image-slot">
                    <el-image :src="noimg" fit="contain" />
                  </div>
                </el-image>
                <span><router-link :to="'/cmdb/schemas/' + item.schemadef._id" class="el-button el-button--text el-button">{{ item.schemadef.name }}</router-link></span>
                <span style="text-align: right; padding: 3px 0" type="text">{{ item.total }}</span>
              </div>
              <div v-for="instance in item.data" :key="instance._id" class="text item">
                <router-link :to="'/cmdb/instances/' + instance._id" class="el-button el-button--text el-button">{{ instance.name }}</router-link>
              </div>
              <div class="text item">
                <router-link :to="{name: 'cmdb_instances', query: {schemadef: item.schemadef._id, kw: s_kw } }" class="el-button el-button--text el-button">查看更多 >>></router-link>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
    </el-card>
  </div>
</template>

<script>
import { globalSearch, exportGlobal, downloadTpl } from '@neu/cmdb-ui/api/instance'
const noimg = require('@neu/cmdb-ui/assets/images/noimg.png')

export default {
  name: 'CmdbHome',
  components: {
  },
  data() {
    return {
      s_kw: '',
      data: [],
      noimg
    }
  },
  created() {
  },
  methods: {
    onGlobalSearch() {
      if (!this.s_kw) return
      globalSearch({ s_kw: this.s_kw }).then(response => {
        this.data = response.data
      })
    },
    exportExcel() {
      const query = { s_kw: this.s_kw }
      exportGlobal(query).then(response => {
        const blob = new Blob([response.data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8' })
        let filename = response.headers['content-disposition']
        if (filename) {
          filename = decodeURI(filename.split('=')[1]) // 提取文件名
        } else {
          filename = '导出信息.xlsx'
        }
        if ('download' in document.createElement('a')) { // 非IE下载
          const elink = document.createElement('a')
          elink.download = filename
          elink.style.display = 'none'
          elink.href = URL.createObjectURL(blob)
          document.body.appendChild(elink)
          elink.click()
          URL.revokeObjectURL(elink.href) // 释放URL 对象
          document.body.removeChild(elink)
        } else { // IE10+下载
          navigator.msSaveBlob(blob, filename)
        }
      })
    },
    downloadTpl() {
      downloadTpl().then(response => {
        const blob = new Blob([response.data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8' })
        let filename = response.headers['content-disposition']
        if (filename) {
          filename = decodeURI(filename.split('=')[1]) // 提取文件名
        } else {
          filename = '实例导入模板.xlsx'
        }
        if ('download' in document.createElement('a')) { // 非IE下载
          const elink = document.createElement('a')
          elink.download = filename
          elink.style.display = 'none'
          elink.href = URL.createObjectURL(blob)
          document.body.appendChild(elink)
          elink.click()
          URL.revokeObjectURL(elink.href) // 释放URL 对象
          document.body.removeChild(elink)
        } else { // IE10+下载
          navigator.msSaveBlob(blob, filename)
        }
      })
    }
  }
}
</script>

<style lang="scss">
  .cmdb-home-page {
    .search-input-wraper {
      margin: 100px auto 20px;
      width: 60%;

      .search-input {
        margin-bottom: 5px;
      }
    }

    .text {
      font-size: 14px;
    }

    .clearfix:before,
    .clearfix:after {
      display: table;
      content: "";
    }
    .clearfix:after {
      clear: both
    }

    .el-image {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      margin-right: 20px;
    }
  }
</style>
